<template>
  <view class="form-box">
    <!--<nui-step :step="2"></nui-step>-->
    <nui-step :step="stepType"></nui-step>
    <u-form :model="form" ref="uForm">
      <u-form-item label="最高学历" label-width="180" prop="edu_background" required
        ><u-input
          type="select"
          :select-open="actionEduShow"
          v-model="form.edu_background"
          placeholder="请选择最高学历"
          @click="actionEduShow = true"
        ></u-input
      ></u-form-item>
      <u-form-item label="毕业院校" label-width="180" prop="school" required
        ><u-input v-model="form.school" placeholder="请输入毕业院校"
      /></u-form-item>

      <view v-for="(item, i) in linkmans" :key="i">
        <u-form-item
          :label="'联系人姓名' + (i + 1)"
          label-width="180"
          :prop="i == 0 ? 'contactsName' : ''"
          :required="i == 0 ? true : false"
          ><u-input v-model="linkmans[i].contactsName" placeholder="请输入紧急联系人姓名" @input="changeName"
        /></u-form-item>
        <u-form-item
          :label="'联系人关系' + (i + 1)"
          label-width="180"
          :prop="i == 0 ? 'contactsRelation' : ''"
          :required="i == 0 ? true : false"
          ><u-input
            type="select"
            :select-open="linkmans[i].actionLinkShow"
            v-model="linkmans[i].contactsRelationText"
            placeholder="请选择联系人关系"
            @click="actionLinkShow(i)"
            @input="changeRelation"
          ></u-input
        ></u-form-item>
        <u-form-item
          :label="'联系人电话' + (i + 1)"
          label-width="180"
          :prop="i == 0 ? 'contactsPhonenumber' : ''"
          :required="i == 0 ? true : false"
          ><u-input
            type="number"
            v-model="linkmans[i].contactsPhonenumber"
            placeholder="请输入联系人电话"
            maxlength="11"
            @input="changeMobile"
        /></u-form-item>
      </view>
    </u-form>
    <view> <u-button type="success" size="mini" @click="addLinkMan" class="custom-btn1">新增</u-button></view>
    <view class="btn-box">
      <u-button type="primary" shape="square" :ripple="true" size="medium" @click="toBackPath" class="custom-btn"
        >上一步</u-button
      >
      <u-button type="primary" shape="square" :ripple="true" size="medium" @click="submit" class="custom-btn"
        >下一步</u-button
      ></view
    >

    <u-select
      v-model="actionEduShow"
      :list="actionEduList"
      mode="single-column"
      @confirm="actionEduCallback"
    ></u-select>
    <view v-for="(item, i) in linkmans" :key="i">
      <u-select
        v-model="item.actionLinkShow"
        :list="actionLinkList"
        mode="single-column"
        @confirm="actionLinkCallback"
      ></u-select>
    </view>
    <u-modal
      v-model="showModel"
      content="确认提交数据？"
      @confirm="submitData"
      @cancel="cancel"
      show-cancel-button
    ></u-modal>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import AuthInfo from "@/utils/authInfo.js";
export default {
  data() {
    return {
      form: {
        edu_background: "", //最高学历
        school: "", //毕业院校
        contactsName: "",
        contactsRelation: "",
        contactsRelationText: "",
        contactsPhonenumber: "",
      },
      linkmans: [
        {
          contactsName: "",
          contactsRelation: "",
          contactsRelationText: "",
          contactsPhonenumber: "",
          actionLinkShow: false,
        },
      ], //联系人
      item: {
        contactsName: "",
        contactsRelation: "",
        contactsRelationText: "",
        contactsPhonenumber: "",
        actionLinkShow: false,
      },
      curEduValue: "",
      showModel: false,
      idx: 0, //联系人关系索引
      linkLeng: 1, //联系人关系数组长度
      actionEduShow: false,
      actionEduList: [],
      actionLinkList: [],

      rules: {
        edu_background: [
          {
            required: true,
            message: "请选择最高学历",
            trigger: "change",
          },
        ],
        school: [
          {
            required: true,
            message: "请输入毕业院校",
            trigger: ["change", "blur"],
          },
        ],
        contactsName: [
          {
            required: true,
            message: "请输入紧急联系人姓名",
            trigger: ["change", "blur"],
          },
        ],
        contactsRelation: [
          {
            required: true,
            message: "请选择紧急联系人关系",
            trigger: ["change", "blur"],
          },
        ],
        contactsPhonenumber: [
          {
            required: true,
            message: "请输入紧急联系人手机号",
            trigger: ["change", "blur"],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: "手机号码不正确",
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["highestEducations", "emergencyContacts", "userInfo","stepType", "qrCodeId"]),
  },
  mounted() {
    this.highestEducations.forEach((item) => {
      this.actionEduList.push({
        value: item.dictValue,
        label: item.dictLabel,
      });
    });
    this.emergencyContacts.forEach((item) => {
      this.actionLinkList.push({
        value: item.dictValue,
        label: item.dictLabel,
      });
    });

    if (this.userInfo.highestEducation != "") {
      this.actionEduList.forEach((item) => {
        if (item.value == this.userInfo.highestEducation) {
          this.form.edu_background = item.label;
          this.curEduValue = item.value;
        }
      });
    }

    this.userInfo.graduatedFrom != "" && (this.form.school = this.userInfo.graduatedFrom);
    let contacts = this.userInfo.ridInductionContactVoList;
    if (contacts.length > 0) {
      this.form.contactsName = contacts[0]["contactsName"];
      this.form.contactsRelation = contacts[0]["contactsRelation"];
      this.form.contactsRelationText = contacts[0]["contactsRelationText"];
      this.form.contactsPhonenumber = contacts[0]["contactsPhonenumber"];

      this.linkmans = [];
      contacts.forEach((item) => {
        this.linkmans.push({
          contactsName: item.contactsName,
          contactsRelation: item.contactsRelation,
          contactsRelationText: item.contactsRelationText,
          contactsPhonenumber: item.contactsPhonenumber,
          actionLinkShow: false,
        });
      });
    }
  },
  methods: {
    changeName(e) {
      this.form.contactsName = e;
    },
    changeMobile(e) {
      this.form.contactsPhonenumber = e;
    },
    changeRelation(e) {
      this.form.contactsRelation = e;
    },
    toBackPath() {
      this.$u.route("pages/step_two/index");
    },
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          this.showModel = true;
        } else {
          ui.showModal({
            title: "提示",
            content: "验证失败",
          });
        }
      });
    },
    submitData() {
      this.submitInfo();
      // this.$u.route("pages/step_four/index");
    },
    cancel() {
      this.showModel = false;
    },
    async submitInfo() {
      let { school } = this.form;
      let params = {
        step: "3",
        highestEducation: this.curEduValue,
        graduatedFrom: school,
        ridInductionContactVoList: this.linkmans,
        qrcodeId: this.qrCodeId
      };
      let res = await this.$api.riders.inductionRecord(params);
      if (res.code != 200) {
        uni.showToast({
          title: res.msg,
          icon: "error",
        });
        return;
      }
      uni.showToast({
        title: "数据已提交",
        icon: "success",
      });
      AuthInfo.checkUserStatus();
    },
    actionEduCallback(e) {
      this.form.edu_background = e[0].label;
      this.curEduValue = e[0].value;
    },
    actionLinkCallback(e) {
      this.form.contactsRelation = e[0].label;
      this.linkmans[this.idx]["contactsRelationText"] = e[0].label;
      this.linkmans[this.idx]["contactsRelation"] = e[0].value;
    },
    actionLinkShow(i) {
      this.idx = i;
      this.linkmans[i]["actionLinkShow"] = true;
    },
    addLinkMan() {
      this.$set(this.linkmans, this.linkmans.length, {
        contactsName: "",
        contactsRelation: "",
        contactsRelationText: "",
        contactsPhonenumber: "",
        actionLinkShow: false,
      });
    },
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>

<style lang="scss" scoped>
.form-box {
  padding: 20px;
}
.custom-btn1 {
  margin: 15px auto;
  left: 50%;
  transform: translateX(-50%);
}
.custom-btn {
  margin-top: 15px;
  // margin: 15px auto;
  // left: 50%;
  // transform: translateX(-50%);
}
.btn-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
